import React, { Component , useState, useEffect } from 'react'
import * as echarts from 'echarts';
import ecStat from 'echarts-stat';
import { InboxOutlined } from '@ant-design/icons';
import axios from 'axios';
import {Modal, Spin,Button,Form,Upload,Input} from 'antd';

const formItemLayout = {
  labelCol: {
    span: 6,
  },
  wrapperCol: {
    span: 14,
  },
};
const antbtn = {
  width: '100%',
}

export default class Boxplot extends Component {    
  constructor(props) {
    super(props);
    this.state = {
      loading: false,
      isModalOpen: false,
      ChartTitle:'',
      file: null,
      DataList:[],
      Xtitle:[],
      styles :{
        backgroundImage: 'url(/img/Bar.png)',
        backgroundRepeat: 'no-repeat',
        backgroundPosition: 'center center',
        backgroundSize: 'cover',
        width: '100%',
        height: '100vh'
      }
    };
    this.normFile = this.normFile.bind(this);
    this.onFinish = this.onFinish.bind(this);
    this.handleChange = this.handleChange.bind(this);
  }

  showModal = () => {
    this.setState({
      isModalOpen: true,
    });
  };
  handleOk = () => {
    this.setState({
      isModalOpen: false,
    });
  };
  handleCancel = () => {
    this.setState({
      isModalOpen: false,
    });
  };
  handleChange = (e) => {
    this.setState({
      ChartTitle: e.target.value,
    });
  }
  normFile = (e) => {
    console.log('Upload event:', e);
    const File = e.file;
    this.setState({ file: File });
  }
  onFinish = (values) => {
    this.setState({
      isModalOpen: false,
    });
    this.initChart();
  }
    initChart = () => {
      const { ChartTitle ,DataList} = this.state;
      this.setState({
        DataList:[],
      });
        var chartDom = document.getElementById('BoxplotChart');
        this.myChart = echarts.init(chartDom);
        echarts.registerTransform(ecStat.transform.histogram);
        fetch('./example/example-box.xlsx')
        .then(res => res.text())
        .then(data => {
          const rows = data.split('\n');
          rows.map((row, idx) => {
            const cells = row.split('\t');
            if(cells[0] == ''){
              return
            }
            this.setState({
              DataList :[...this.state.DataList,cells]
            })
          })
          this.state.DataList.shift();
          var option = {
            title: [
              {
                text: ChartTitle,
                left: 'center'
              },
              {
                text: 'upper: Q3 + 1.5 * IQR \nlower: Q1 - 1.5 * IQR',
                borderColor: '#999',
                borderWidth: 1,
                textStyle: {
                  fontWeight: 'normal',
                  fontSize: 14,
                  lineHeight: 20
                },
                left: '10%',
                top: '90%'
              }
            ],
            dataset: [
              {
                source: DataList
              },
              {
                transform: {
                  type: 'boxplot',
                  config: { itemNameFormatter: 'expr {value}' }
                }
              },
              {
                fromDatasetIndex: 1,
                fromTransformResult: 1
              }
            ],
            tooltip: {
              trigger: 'item',
              axisPointer: {
                type: 'shadow'
              }
            },
            grid: {
              left: '10%',
              right: '10%',
              bottom: '15%'
            },
            xAxis: {
              type: 'category',
              boundaryGap: true,
              nameGap: 30,
              splitArea: {
                show: false
              },
              splitLine: {
                show: false
              }
            },
            yAxis: {
              type: 'value',
              name: 'km/s minus 299,000',
              splitArea: {
                show: true
              }
            },
            series: [
              {
                name: 'boxplot',
                type: 'boxplot',
                datasetIndex: 1
              },
              {
                name: 'outlier',
                type: 'scatter',
                datasetIndex: 2
              }
            ]
          };
        this.myChart.setOption(option);
        });

        
    }
    chartReseize = () => {
        this.myChart && this.myChart.resize()
    }
    componentDidMount() {
        this.initChart()
    }
    render() {
      const { isModalOpen ,loading } = this.state;
        return (
            <>
              <Button style={antbtn} onClick={() => this.showModal()} className='antbtn'>Open Modal</Button>
              <Modal title="Basic Modal" open={isModalOpen} onOk={() =>this.handleOk()} onCancel={() =>this.handleCancel()} 
              cancelButtonProps={{ style: { display: "none" } }} // 隐藏取消按钮
              okButtonProps={{ style: { display: "none" } }} // 隐藏确认按钮
              >
              <Spin spinning={loading}>  
              <Form onSubmit={this.handleSubmit}
                    name="validate_other"
                    {...formItemLayout}
                    onFinish={this.onFinish}
                    style={{
                      maxWidth: 600,
                    }}
                  >
                    <Form.Item label="Title">
                      <Input placeholder="Please Input Title" value={this.state.value} onChange={this.handleChange} />
                    </Form.Item>
                    <Form.Item label="Dragger">
                      <Form.Item name="dragger" multiple={false} valuePropName="file" getValueFromEvent={this.normFile} noStyle>
                       <Upload.Dragger name="files"  action="/upload.do" >
                          <p className="ant-upload-drag-icon">
                            <InboxOutlined />
                          </p>
                          <p className="ant-upload-text">Click or drag file to this area to upload</p>
                        </Upload.Dragger>
                        </Form.Item>
                      </Form.Item>
                      <Form.Item label="Example File">
                      <Button type="text" onClick={()=> this.getExampleFile()} danger>Example File</Button>
                      </Form.Item>
                    <Form.Item
                      wrapperCol={{
                        span: 12,
                        offset: 6,
                      }}
                    >
                      <Button type="primary" htmlType="submit" >
                        Submit
                      </Button>
                    </Form.Item>
                </Form></Spin>
              </Modal>
            <div className='w100 h100' id='BoxplotChart'></div>
            </>
        )
    }
}
